<template>
  <view class="content">
    <u-cell-group :border="false">
      <u-cell
        v-for="(item, index) in pageChatListSort"
        :key="index"
        @click="confirmOn(item)"
      >
        <template #icon>
          <image :src="item.info.avatar" class="avatar" />
        </template>
        <template #title>
          <view class="ml">{{ mapNickname(item) }}</view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["pageChatList"]),
    pageChatListSort() {
      if (this.pageChatList && this.pageChatList.length > 0) {
        let list = this.pageChatList.filter(
          (o) => o.info && Object.keys(o.info).length !== 0
        );
        const sort = [0, 6, 5, 4, 2, 3, 1];
        list.sort((a, b) => {
          if (a.isTop == b.isTop) {
            const aType = sort[a.conversationType];
            const bType = sort[b.conversationType];
            return aType === bType
              ? b.lastSentTime - a.lastSentTime
              : aType > bType
              ? -1
              : 1;
          }
          return b.isTop - a.isTop;
        });
        return list;
      } else return [];
    },
  },
  onLoad() {
  },
  methods: {
    mapNickname(item) {
      return item.conversationType == 1
        ? this.formatUserName(item.info)
        : item.conversationType == 6
        ? this.$t(this.formatUserName(item.info))
        : item.info && item.info.groupName;
    },

    confirmOn(e) {
      uni.$emit("sendUserId", {
        userId: e.info.userId,
        nickName: this.mapNickname(e),
      });
      uni.navigateBack();
    },
  },
};
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.ml {
  margin-left: 20rpx;
}
.content {
  padding: 10rpx 44rpx;
}
.avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 10rpx;
}
</style>
